<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>注册第二步</title>
    <link href="../favicon.ico" rel="shortcut icon">
	<link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/system/public.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/css/system/register.css" rel="stylesheet"/>
</head>
<body class="s_body k_body">
<div class="s_content">
    <h3><span>2</span>
        <p>/2</p> 完善资料
    </h3>
    <div class="s_login_box">
        <form>
            <p><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名</i><input type="text" id="name" maxlength="10"/>
            </p>
            <p><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮件</i><input type="text" id="email" maxlength="40"/>
            </p>
            <div class="posR">
                <p class="s_dropdown_p">
                    <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地区</i>
                </p>
                <div class="dropdown s_dropdown">
                    <button class="btn btn-default dropdown-toggle tL" type="button">
                        <b class="cityTextBtn">请选择</b>
                        <span class="dropImg"><img src="${pageContext.request.contextPath}/images/system/dropDown.png"/></span>
                    </button>
                    <div class="dropdown-menu dropdownLeft">
                        <ul class="pro">
                        </ul>
                    </div>
                    <div class="dropdown-menu dropdownRight">
                        <ul class="city">
                        </ul>
                    </div>
                </div>
                <input type="hidden" class="cityTextVal" value=""/>
            </div>
            <div class="posR">
                <p class="s_dropdown_p">
                    <i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;行业</i>
                </p>
                <div class="dropdown s_dropdown">
                    <button class="btn btn-default dropdown-toggle tL" type="button" id="dropdownMenu1"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <b class="industryTextBtn">请选择</b>
                        <span class="dropImg"><img src="${pageContext.request.contextPath}/images/system/dropDown.png"/></span>
                    </button>
                    <div class="dropdown-menu dropdownLeft industry">
                        <ul class="parentOption">
                        </ul>
                    </div>
                    <div class="dropdown-menu dropdownRight industryChild">
                        <ul class="childOption"><!-- 机构及其他 -->
                        </ul>
                    </div>
                </div>
                <input type="hidden" class="industryTextVal" value=""/>
            </div>
            <p><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司</i><input type="text" id="company" maxlength="50"/>
            </p>
            <p><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;职位</i><input type="text" id="job" maxlength="20"/></p>
            <p>
                <i>企业介绍</i>
                <textarea rows="5" cols="20" placeholder="请输入企业介绍" id="intro"
                          maxlength="1000"></textarea>
            </p>
        </form>
        <!--             <div class="interested">
                        <span>选择或输入您的个人爱好</span>
                        <input type="text" class="addEle" placeholder="自定义" name="hobby" maxlength="20">
                        <span class="alertWord">按Enter键确认，不超过3个。</span>
                    </div>
                    <ol class="fix tabs">
                        <li class="s_fx_li1 g_li">
                            <img src="${pageContext.request.contextPath}/images/system/s_check.png" class="s_fk_pic1" _id="1" />宠物
                        </li>
                        <li class="s_fx_li2 g_li">
                            <img src="${pageContext.request.contextPath}/images/system/s_check.png" class="s_fk_pic2" _id="3" />植物
                        </li>
                        <li class="s_fx_li3 g_li">
                            <img src="${pageContext.request.contextPath}/images/system/s_check.png" class="s_fk_pic3" _id="5" />户外
                        </li>
                        <li class="s_fx_li4 g_li">
                            <img src="${pageContext.request.contextPath}/images/system/s_check.png" class="s_fk_pic4" _id="7" />电影
                        </li>
                        <li class="s_fx_li5 g_li">
                            <img src="${pageContext.request.contextPath}/images/system/s_check.png" class="s_fk_pic5" _id="7" />美食
                        </li>
                    </ol> -->
        <div id="warning_word" style="color:red;text-align:center;"></div>
        <div class="btnBox">
            <a href="javascript:;" class="s_dl_button" id="s_se_button">完成</a>
        </div>
    </div>

</div>
<div class="s_footer">
    <p>zhfeat</p>
</div>

<!-- 注册完成审核弹框 -->
<div class="s_popup">
    <div class="issue">
        <span><img src="${pageContext.request.contextPath}/images/system/s_close.png"/></span>
        <h4><img src="${pageContext.request.contextPath}/images/system/icon_hint.png"/> 注册信息提交成功</h4>
        <p>您提交的注册信息会在3个工作日内完成审核， 请注意接听客服电话</p>
        <a href="<%=basePath%>" class="s_btns">确定</a>
    </div>
</div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
    $('.s_login_box input').focus(function () {
        $(this).addClass('focus');
    });
    $('.s_login_box input').blur(function () {
        $(this).removeClass('focus');
    });
    $(function () {
        var cityJSON = null;
        var cityText = "";
        var industryJson = null;
        var optionText = "";
        var itemNum = 0;
        $.getJSON("${pageContext.request.contextPath}/js/system/industry.js", function (result) {
            industryJson = result["industry"];
            var industry = "";
            $.each(industryJson, function (i, item) {
                industry += "<li><a href='javascript:void(0);'>" + item['p'] + "<input class='industryIndex' type='hidden' value='" + i + "'/></a></li>";
                console.log(industry);
                $('.parentOption').html(industry)
            });
            $.getJSON("${pageContext.request.contextPath}/js/system/city.js", function (result) {
                cityJSON = result["citylist"];
                var pro = "";
                $.each(cityJSON, function (i, item) {
                    pro += "<li><a href='javascript:void(0);'>" + item['p'] + "<input class='proIndex' type='hidden' value='" + i + "'/></a></li>";
                })
                $('.pro').html(pro)
            });
            var proIndex = null;
            $('.pro').on('mouseenter', 'li', function (e) {
                e.stopPropagation();
                proIndex = $(this).find('.proIndex').val();

                console.log(proIndex)
                if (Number(proIndex) != 0 && Number(proIndex) != 1 && Number(proIndex) != 8 && Number(proIndex) != 21) {
                    cityText = $(this).find('a').text() + "省";
                } else {
                    cityText = $(this).find('a').text() + "市";
                }
                $(this).find('a').addClass('on').parent().siblings().find('a').removeClass('on');
                var city = cityJSON[proIndex]["c"];
                var cityHTML = "";
                $.each(city, function (i, item) {
                    cityHTML += "<li><a href='javascript:void(0);'>" + item['n'] + "<input class='cityIndex' type='hidden' value='" + i + "'/></a></li>";
                })
                $('.city').html(cityHTML);
                $(this).parents('.s_dropdown').find('.dropdownRight').show();
            });
            var industryIndex = null;
            $('.parentOption').on('click', 'li', function (e) {
                var industryText = "";
                optionText = "";
                e.stopPropagation();
                optionText += $(this).find('a').text() + "-";
                industryIndex = $(this).find('.industryIndex').val();
                $(this).find('a').addClass('on').parent().siblings().find('a').removeClass('on');
                var industrys = industryJson[industryIndex]["c"];
                var industryHTML = "";
                $.each(industrys, function (i, item) {
                    industryHTML += "<li><a href='javascript:void(0);'>" + item['n'] + "<input class='cityIndex' type='hidden' value='" + i + "'/></a></li>";
                })
                $('.childOption').html(industryHTML);
                $(this).parents('.s_dropdown').find('.dropdownRight').show();
            });

            $('.childOption').on('click', 'li', function (e) {
                e.stopPropagation();
                industryText = $(this).find('a').text();
                optionText += $(this).find('a').text();

                $(this).parents('.s_dropdown').find('.dropdown-menu').hide();

                $('.industryTextBtn').text(industryText);
                $('.industryTextVal').val(optionText);
                cityText = "";
                $('.dropdown-toggle').removeClass('btnOn');
            });

            $('.city').on('click', 'li', function (e) {
                e.stopPropagation();
                console.log(proIndex)
                if (Number(proIndex) != 0 && Number(proIndex) != 1 && Number(proIndex) != 8 && Number(proIndex) != 21 && Number(proIndex) != 33) {
                    cityText += $(this).find('a').text() + "市";
                } else {
                    cityText += $(this).find('a').text();
                }

                $(this).parents('.s_dropdown').find('.dropdown-menu').hide();
                $('.cityTextBtn').text(cityText);
                $('.cityTextVal').val(cityText);
                $('.cityText').show();
                cityText = "";
                $('.dropdown-toggle').removeClass('btnOn');
            });
            $('.dropdown-toggle').on('click', function (e) {
                e.stopPropagation();
                $('.dropdown-menu').hide();
                $(this).toggleClass('btnOn');
                if ($(this).hasClass('btnOn')) {
                    $(this).next().show();
                } else {
                    $(this).parent().find('.dropdown-menu').hide();
                }
            });

            $('body').on('click', function () {
                $('.dropdown-menu').hide();
                $('.dropdown-toggle').removeClass('btnOn');
            });
            $(document).on('click', '.tabs>li>img', function () {
                var src = $(this).attr("src");
                if (src.indexOf("s_check_no") > 0) {
                    $(this).attr("src", "${pageContext.request.contextPath}/images/system/s_check.png");
                } else {
                    $(this).attr("src", "${pageContext.request.contextPath}/images/system/s_check_no.png");
                }
            });
        })
        var wword = $("#warning_word");
        $('.addEle').on('keydown', function (e) {
            var ele = "";
            if (e.keyCode == 13) {
                var con = $.trim($(this).val());
                var con_k = "";
                $(".tabs>li").each(function () {
                    con_k = $.trim($(this).text());
                    if (con == con_k) {
                        wword.text("不能输入重复的关键字");
                        con = "";
                    }
                });
                if (con == "") {
                    $(this).val('');
                    return false;
                }
                if (itemNum >= 3) {
                    alert(itemNum)
                    return false;
                }
                itemNum++;
                if (itemNum == 3) {
                    $('.addEle').css('visibility', 'hidden');
                    $('.alertWord').css('visibility', 'hidden');
                }
                wword.text("");
                ele = '<li class="s_fx_li1 c_li"><img src="${pageContext.request.contextPath}/images/system/s_check_no.png" class="c_' + itemNum + '" _id="c_' + itemNum + '" />' + con + ' <img class="k_del" src="${pageContext.request.contextPath}/images/system/k_close.png" /></li>';
                $('.s_login_box ol').append(ele);
                $(this).val('');
            }
        })
        $('body').on('click', '.k_del', function () {
            $(this).parent().remove();
            $('.addEle').css('visibility', 'visible');
            $('.alertWord').css('visibility', 'visible');
            itemNum--;
        })
    })
</script>
<script type="text/javascript">
    //点击“下一步”，触发提交          $('#').val();
    var wword = $("#warning_word");
    $(function () {
        $('#s_se_button').click(function () {
            var name = $('#name').val();
            if (name == null || name == "") {
                wword.text("姓名不能为空");
                return;
            }
            //邮件
            var email = $('#email').val();
            if (email == null || email == "") {
                wword.text("邮箱不能为空");
                return;
            }
            //地区
            var district_name = $('.cityTextBtn').text();
            if (district_name == null || district_name == "请选择") {
                wword.text("地区不能为空");
                return;
            }
            //行业
            var industry = $('.industryTextBtn').text();
            if (industry == null || industry == "请选择") {
                wword.text("行业不能为空");
                return;
            }
            //公司
            var company = $('#company').val();
            if (company == null || company == "") {
                wword.text("公司名称不能为空");
                return;
            }
            //职位
            var job = $('#job').val();
            if (job == null || job == "") {
                wword.text("职位不能为空");
                return;
            }
            //爱好
            var hobby = "";
            $(".tabs>li>img[src$='s_check_no.png']").each(function () {
                hobby += $.trim($(this).parent().text()) + ",";
            });
            //企业介绍
            var intro = $('#intro').val();
            if (intro == null || intro == "") {
                wword.text("企业介绍不能为空");
                return;
            }
            //alert(hobby);
            var url = "${pageContext.request.contextPath}/api/self_info/update";
            var params = {
                "name": name,
                "email": email,
                "district_name": district_name,
                "industry": industry,
                "company": company,
                "job": job,
                "hobby": hobby,
                "intro": intro
            };
            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/api/self_info/update",
                data: params,
                dataType: "json",
                success: function (data) {
                    if ("1" == data.error_code) {
                        $('.s_popup,.issue').show();
//                            .delay(10000).fadeOut(function () {
                        <%--window.location.href = "<%=basePath%>";--%>
//                        });
                    } else {
                        /* 显示错误 */
                        wword.text(data.message);
                    }

                }
            });
        });
    });
</script>
<script type="text/javascript">
    var wword = $("#warning_word");
    $(function () {
        //邮件格式判断
        $('#email').blur(function () {
            //用户输入的邮件
            var email = $('#email').val();
            if (email == null || email == "") {
                wword.text("");
                return;
            }
            //正则表达式
            var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
            //判断
            if (!reg.test(email)) {
                wword.text("不符合邮件地址规范");
                document.getElementById("email").value = "";
            } else {
                wword.text("");
            }
        });
    })
</script>
</body>
</html>

